Estoy tratando de importar una clase a mi archivo "main.js". Aquí hay una versión minificada de mi código.
// "extended.js" file export default class Test { constructor() { this.prop = "Hello" console.log(this.prop) } } // "main.js" file window.onload = function () { import Test from "./extended" new Test() } El archivo main.js es el archivo JavaScript de interfaz para mi aplicación Express, por lo que se almacena en la carpeta "pública". Cuando carga la página, el error inicial que ocurre es "No se puede usar la declaración de importación fuera de un módulo". He investigado por mi cuenta y varias personas han declarado que el uso de type="module" para la etiqueta de secuencia de comandos "main.js" resolverá el problema. Cuando hice eso, el error cambió a "Error de sintaxis no detectado: identificador inesperado". ¿Hay algo que me falta sobre cómo usar los módulos y las clases de ES6?
Solo puede importar en el nivel superior; no se puede hacer dentro de un bloque. Cambio
window.onload = function () { import Test from "./extended" new Test() }a
import Test from "./extended" window.onload = function () { new Test() };Sin embargo, también sugeriría no crear clases para efectos secundarios: si solo desea que la clase haga algo, pero no que devuelva algo útil, use una función simple en su lugar.
export default () => { const prop = "Hello"; console.log(prop); };